<template>
  <div class="detail-info" v-if="Object.keys(detailInfo).length !==0">
    <div class="info-desc clearfix">
      <div class="start"></div>
      <div class="desc">{{detailInfo.desc}}</div>
      <div class="end"></div>
    </div>
    <div class="info-key">{{detailInfo.detailImage[0].key}}</div>
    <div class="info-list">
      <img v-for="(item,index) in detailInfo.detailImage[0].list" :src="item" :key="index" @load="imgLoaded" />
    </div>
  </div>
</template>

<script scoped>
export default {
   name: 'DetailInfo',
   props: {
      detailInfo: {
        type: Object,
        default: {}
      }
   },
   data() {
       return {}
   },
   methods: {
     imgLoaded() {
       this.$emit('imgLoaded');
     }
   }
}
</script>

<style lang='less' scoped>
  .pos {
    content: '';
    position: absolute;
    width: .1rem;
    height: .1rem;
    background-color: #333;
    bottom: 0;
  }
  .detail-info {
    padding: .4rem 0;
    border-bottom: .1rem solid #f2f5f8;;
    .info-desc {
      padding: 0 .3rem;
      .start, .end {
        width: 1.8rem;
        height: 0.01rem;
        background-color: #a3a3a5;
        position: relative;
      }
      .start {
        .left();
        &::before {
          .pos();
        }
      }
      .end {
       .right();
       &::after {
          .pos();
          right:0
        }
      }

      .desc {
        line-height: 1.2;
        padding: .3rem 0;
      }
    }
    .info-key {
      margin: .2rem 0 .2rem .3rem;
      color: #333;
      font-size: .3rem;
    }
    .info-list {
     img {
       width: 100%;
     }
    }
  }
</style>
